<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>CRM登录</title>  
        <!--用百度的静态资源库的cdn安装bootstrap环境-->  
        <script src="js/jquery-2.1.1.min.js"></script>  
        <!-- Bootstrap 核心 CSS 文件 -->  
        <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">  
       
        <script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>  
        <!--jquery.validate-->  
        <script type="text/javascript" src=js/jquery-validation-1.14.0/lib/jquery.js ></script>  
        <script  src="js/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></script>  
        <script type="text/javascript" src="js/jquery-validation-1.14.0/src/localization/messages_zh.js"></script>
        <style type="text/css">  
            body{background: url(js/img/111.jpg) ;
             background-position: center 0; 
         background-repeat: no-repeat;  
         background-attachment: fixed; 
      background-size: cover; 
          -webkit-background-size: cover;  
          -o-background-size: cover;  
          -moz-background-size: cover;  
          -ms-background-size: cover; 
            background-size: <span style="font-family: 微软雅黑; rgb(239, 239, 239);">cover</span>;font-size: 16px;}  
            .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}  
            .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}  
            input[type="text"],input[type="password"]{padding-left:26px;}  
            .checkbox{padding-left:21px;}  
               .container{
                display:table;
                height:100%;
            }

            
        </style>  
    </head>  
    <body>  
       
    <div class="container">  
        <div class="form row">  
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="loginform">  
            	<fieldset>
                <h3 class="form-title">欢迎登录CRM管理系统</h3>  
                <div class="col-sm-9 col-md-9">  
                    <div class="form-group">  
                    <!-- autofocus="autofocus" -->
                        <i class="fa fa-user fa-lg"></i>  
                        <input class="form-control required"  id="username" type="text" placeholder="Username" name="username"  rangelength=[2,6]     />  
                   	
                    </div>  
                   		<div class="alert alert-danger hide  close" id="unames">用户名不存在</div>
                   	<div class="alert alert-danger hide  close" id="resuname">该用户可以正常使用</div> 
                    <div class="form-group">  
                            <i class="fa fa-lock fa-lg"></i>  
                            <input class="form-control required" id="password" type="password" placeholder="Password" name="password" rangelength=[5,12]>  
                    </div>  
					
                    <div class="form-group">  
                    <div class="alert alert-danger hide  close" id="adderrmsg">密码错误</div>
                    <div class="alert alert-danger hide  close" id="suoding">用户被锁定，请联系管理员解锁</div>
                        <input id="dd"  type="button" class="btn btn-large btn-danger btn-block"   value="Login "/>
                        <input id="cdd"  type="button" class="btn btn-large btn-warning btn-block"   value="Reset "/>     
   			 			  
                    </div>
                </div>  
                </fieldset>
            </form>  
        </div>  
        </div>  
    <script>
   
   
  
  // function  check(){
	   $("#username").blur(function(){


	  // alert(1);
	   var  uname = $("#username").val();
	 //  alert(uname);
	   if(uname !="" && uname !=null){
	   $.ajax({
		   url:"checkLoginName",
			type:"post",
			data:{
				loginName : uname
			},
			dataType:"json",
			success:function(res){
				if(res.success){
					 $('#resuname').attr("class","alert-danger");
					 $('#unames').hide();
				}else{
					  $('#unames').attr("class","alert-danger");
				}
			}
		   
		   
	   })
	   }
	   
   }) 
    
$(function(){
	$("#cdd").click(function() {
		window.location.href="login.html";
		//bootstrapvalidator
		//清除表单中数据
		//alert(1)
		//$("#loginform").reset();
		//$("#loginform").data('bootstrapValidator').resetForm(true);
		//$("#loginform").form("clear");
		//clearForm("#loginform")
	});
	$("#dd").click(function(){
    	//alert(2);
    	var flag = $("#loginform").valid();
        if(flag){
        	  var  uname = $("#username").val();
        	var pwd = $("#password").val();
              $.ajax({
          		url:"login",
          		data:{
          			username : uname,
          			password:pwd
          		},
          		type:'post',
          		dataType:'json',
          		success : function (res){
          			if(res.logins){
          				//alert(res.user.id)
          				window.localStorage.setItem("userid",res.user.id);
          				window.localStorage.setItem("loginame",res.user.loginName);
          				window.location.href="index.html";
          			}else{
          				//alert(res.isluck)
          				if(res.isluck){
          					$('#suoding').attr("class","alert-danger");
          					$('#adderrmsg').hide();
          					$("#password").val("");
          					return;
          				 
          				} 
          				$('#adderrmsg').attr("class","alert-danger");
          				$("#password").val("");
          			}
          		}
             });    
        }
       // var uname = $("#username").val();
     
       
        
  });
});
</script>
</body>
</html>  